<template>
    <div class="row justify-content-center">
        <div class="col-lg-12">
            <card type="secondary" shadow
                  header-classes="bg-white pb-5"
                  body-classes="px-lg-5 py-lg-5"
                  class="border-0 mb-3">
                <div class="row justify-content-center">
                    <div class="col-md-12">
                        <div class="row mb-3">
                            <strong class="col-md-4" style="text-align:right">房源名称：</strong>
                            <a href="#"><strong class="col-md-8" style="text-align:left">时尚花园 全新家电 可短租 带独立阳台 上班方便</strong></a>
                        </div>
                        <div class="row mb-3">
                            <strong class="col-md-4" style="text-align:right">
                                用户名称：
                            </strong>
                            <a href="#"><strong class="col-md-8" style="text-align:left"></strong></a>
                        </div>
                        <div class="row mb-3">
                            <p class="col-md-4" style="text-align:right">
                                租赁时间：
                            </p>
                            <a href="#"><p class="col-md-8" style="text-align:left"></p></a>
                        </div>
                        <div class="row mb-3 justify-content-center">
                            <badge v-if="isUpload" type="success">已上传</badge>
                            <badge v-if="!isUpload" type="danger">未上传</badge>
                        </div>
                        <div class="row justify-content-center">
                            <base-button v-if="!isUpload" type="primary" v-b-modal.modal-1>上传合同</base-button>
                            <b-modal id="modal-1" title="上传合同" >
                                <form role="form">
                                    <div class="justify-content-center">
                                        <b-form-file
                                                multiple
                                                v-model="file"
                                                :state="Boolean(file)"
                                                placeholder="请选择合同或拖动合同到此"
                                                drop-placeholder="放下"
                                                class="mb-3"
                                        ></b-form-file>
                                        <div class="row mb-3">
                                            <base-button type="primary" class="contentDiv">保存</base-button>
                                        </div>
                                        <div class="row justify-content-center">
                                            <small class="text-success">上传成功</small>
                                            <i class="fa fa-check"></i>
                                        </div>
                                        <div class="row justify-content-center">
                                            <small class="text-danger">上传失败</small>
                                            <i class="fa fa-times"></i>
                                        </div>
                                    </div>

                                </form>
                                <template slot="modal-footer" slot-scope="{ok}">
                                    <!-- Emulate built in modal footer ok and cancel button actions -->
                                    <b-button size="sm" variant="success" @click="myOk">
                                        完成
                                    </b-button>
                                </template>
                            </b-modal>
                            <base-button v-if="isUpload" type="default" v-b-modal.modal-2>查看合同</base-button>
                            <b-modal id="modal-2" title="查看合同" >
                                <div class="row justify-content-center">
                                    <b-img src="img/房间1.jpeg"></b-img>
                                </div>
                                <template slot="modal-footer" slot-scope="{ok}">
                                    <!-- Emulate built in modal footer ok and cancel button actions -->
                                    <b-button size="sm" variant="success" @click="ok()">
                                        完成
                                    </b-button>
                                </template>
                            </b-modal>
                            <base-button v-if="isUpload" type="default" v-b-modal.modal-3>修改合同</base-button>
                            <b-modal id="modal-3" title="修改合同" >
                                <form role="form">
                                    <div class="justify-content-center">
                                        <b-form-file
                                                multiple
                                                v-model="file"
                                                :state="Boolean(file)"
                                                placeholder="请选择合同或拖动合同到此"
                                                drop-placeholder="放下"
                                                class="mb-3"
                                        ></b-form-file>
                                        <div class="row mb-3">
                                            <base-button type="primary" class="contentDiv">保存</base-button>
                                        </div>
                                        <div class="row justify-content-center">
                                            <small class="text-success">上传成功</small>
                                            <i class="fa fa-check"></i>
                                        </div>
                                        <div class="row justify-content-center">
                                            <small class="text-danger">上传失败</small>
                                            <i class="fa fa-times"></i>
                                        </div>
                                    </div>

                                </form>
                                <template slot="modal-footer" slot-scope="{ok}">
                                    <!-- Emulate built in modal footer ok and cancel button actions -->
                                    <b-button size="sm" variant="success" @click="myOk">
                                        完成
                                    </b-button>
                                </template>
                            </b-modal>
                        </div>
                    </div>
                </div>
            </card>
        </div>
    </div>
</template>

<script>
    export default {
        name: "contractManageComponent"
    }
</script>

<style scoped>

</style>
